<template>
    <div class="pages">
        <van-nav-bar title="退款明细" left-arrow fixed safe-area-inset-top @click-left="onClickLeft">
            <template #right>
                <img v-if="is_admin == 1" class="nav-right" src="https://files.onestep6.com/cloud/delivery-menu.png" alt="" @click="onGy" />
            </template>
        </van-nav-bar>


        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="content-c" v-for="(item, index) in list" :key="index" @click="onRefundDetail(item)">
                <div class="conetnt-title">
                    <div class="title-flex">
                        <img class="title-img" src="https://files.onestep6.com/cloud/order-icon.png" />
                        <div class="title-txt">{{ item.user_shop_name }}</div>
                    </div>
                    <div class="title-type">
                        <span>已退款</span>
                    </div>
                </div>
                <div class="content-order">
                    <div class="order-scroll">
                        <div class="scroll">
                            <div class="scroll-content">
                                <img class="scroll-img" v-for="(itemC, indexC) in item.refund_order" :key="indexC" :src="itemC.good_pics" />
                            </div>
                        </div>
                    </div>
                    <div class="order-num">
                        <span>共{{ item.refund_order_num }}件</span>
                        <img class="num-icon" src="https://files.onestep6.com/cloud/order-right.png" />
                    </div>
                </div>
                <div class="content-time">
                    <div class="time-txt">下单时间：<span class="txt-col">{{ item.created }}</span></div>
                    <div class="time-price">
                        <span>退款金额</span>
                        <span class="price-iocn">¥</span>
                        <span class="price-num">{{ item.refund_price_arr.z_price }}</span>
                        <span class="price-small">.{{ item.refund_price_arr.x_price }}</span>
                    </div>
                </div>
            </div>
        </van-list>

        <channel-select ref="channelSelect" :formList="formList" @select="shopSelect" />

    </div>
</template>
<script>
import { refundOrderList, shopList } from "@/api/cloud";
import channelSelect from '@/components/channelSelect.vue';
export default {
    components: {
        channelSelect
    },
    data() {
        return {
            pages: 1,
            size: 10,
            list: [],
            loading: false,
            finished: false,
            info: {
                goods: {
                    list: ["https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg", "https://files.hzahp.com/imgs/2025/09/10/175748532263266.jpg"]
                },
                price_arr: {
                    z_price: "16",
                    x_price: "90"
                }
            },
            is_admin: 0,
            formList: [],
            shop_id: ''
        }
    },
    mounted() {
        this.is_admin = localStorage.getItem('is_admin')
        if (this.is_admin == 1) {
            this.shopList();
        }
    },
    methods: {
        async onLoad() {
            let params = {
                pages: this.pages,
                size: this.size,
                shop_id: ''
            }
            if (this.shop_id) {
                params.shop_id = this.shop_id;
            }
            const res = await refundOrderList(params);
            if (res.status == 1) {
                this.list = this.list.concat(res.data.list);
                this.loading = false;
                if (this.list.length >= res.data.count) {
                    this.finished = true;
                } else {
                    this.pages++;
                }
            }
        },
        onClickLeft() {
            this.$router.back();
        },
        onRefundDetail(item) {
            console.log(item)
            this.$router.push({
                path: '/refundDetail',
                query: {
                    id: item.id
                }
            })
        },
        // 获取所有供货商
        async shopList() {
            const res = await shopList({});
            if (res.status == 1) {
                console.log(res)
                res.data.shop_list.map((item)=>{
                item.name = item.realname;
                })
                this.formList =[ {id: 0, name: '全部'},...res.data.shop_list];
            }
        },
        onGy() {
            this.$refs.channelSelect.init();
        },
        shopSelect(obj) {
            console.log(obj)
            this.shop_id = obj.id;
            this.pages = 1;
            this.list = [];
            this.loading = true;
            this.finished = false;
            this.onLoad();
        },
    },
}
</script>
<style lang="less" scoped>
.pages {
    padding-top: calc(92px + 24px);
    padding-bottom: 88px;
    min-height: 100vh;
    background: #F6F6F6;

    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }

    ::v-deep .van-nav-bar {
        background: #FFFFFF;
    }

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}
.nav-right{
    display: block;
    width: 33px;
    height: 33px;
    // margin: 0 38px;
}

.content-c {
    width: 702px;
    border-radius: 16px;
    padding: 30px 26px 20px 32px;
    background: #FFFFFF;
    margin: 0 auto 24px;

    .conetnt-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32px;

        .title-flex {
            display: flex;
            align-items: center;
        }

        .title-img {
            flex-shrink: 0;
            display: block;
            width: 36px;
            height: 36px;
            margin-right: 8px;
        }

        .title-txt {
            font-size: 32px;
            line-height: 36px;
            color: #141414;
            font-weight: bold;
        }
        .title-type {
            font-size: 24px;
            line-height: 36px;
            color: #798391;
            font-weight: 400;

            .type-ps {
                color: #49CA6F;
            }

            .type-fk {
                color: #FF0000;
            }
        }
    }

    .content-order {
        display: flex;
        align-items: center;
        margin-bottom: 40px;

        .order-scroll {
            width: 502px;
            height: 128px;

            .scroll {
                width: 502px;
                height: 128px;
                overflow-x: scroll;
                scrollbar-width: none;
                /* Firefox 隐藏滚动条 */
                -ms-overflow-style: none;
                /* IE 10+ 隐藏滚动条 */
            }

            .scroll::-webkit-scrollbar {
                display: none;
                /* Chrome、Safari、Edge 隐藏滚动条 */
            }
        }

        .scroll-content {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;

            .scroll-img {
                flex-shrink: 0;
                display: block;
                width: 128px;
                height: 128px;
                border-radius: 8px;
                margin-right: 24px;
            }
        }

        .order-num {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 24px;
            line-height: 24px;
            color: #798391;
            font-weight: 400;

            .num-icon {
                flex-shrink: 0;
                display: block;
                width: 24px;
                height: 24px;
                margin-left: 2px;
            }
        }
    }

    .content-time {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time-txt {
            font-size: 20px;
            line-height: 22px;
            color: #798391;
            font-weight: 400;

            .txt-col {
                color: #49CA6F;
            }
        }
        .time-price {
            font-size: 24px;
            color: #141414;
            font-weight: bold;

            .price-iocn {
                margin-left: 4px;
                margin-right: 2px;
            }

            .price-num {
                font-size: 40px;
            }

            .price-small {
                font-size: 28px;
            }
        }
    }
}
</style>